@mixin bg($name) {
    background: url("./images/" + $name) no-repeat center top / 100%;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.rich_map {
    position: relative;
    margin: 0 auto;
    width: 345px;
    height: 387px;
    @include bg("rich_map.png");
    cursor: pointer;
}
.rich_cycle {
    position: absolute;
    top: 97.5px;
    left: 107.5px;
    width: 125px;
    line-height: 12px;
    font-size: 10px;
    color: #f3f4e0;
    text-align: center;
}
.rich_roll1_btn {
    position: absolute;
    bottom: 18px;
    left: 9px;
    width: 132px;
    height: 50px;
    @include bg("rich_roll1_btn.png");
    cursor: pointer;
}
.rich_roll5_btn {
    @extend .rich_roll1_btn;
    @include bg("rich_roll5_btn.png");
    left: auto;
    right: 9px;
}
.rich_ticket {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.5px;
    margin: 0 auto;
    width: 100px;
    height: 12px;
    line-height: 12px;
    font-size: 11px;
    color: #ebec8c;
    text-align: center;
}
.rich_fox {
    position: absolute;
    left: -19.5px;
    top: -23px;
    width: 39px;
    height: 46px;
    transition: transform 0.5s;
    @include bg("rich_fox_right.png");
    z-index: 1;
}
.rich_fox1 {
    transform: translate(160.5px, 27.5px);
}
.rich_fox2 {
    transform: translate(196px, 47px);
}
.rich_fox3 {
    transform: translate(230px, 70px);
}
.rich_fox4 {
    transform: translate(264.5px, 88px);
}
.rich_fox5 {
    transform: translate(241.5px, 108.5px);
    @include bg("rich_fox_left.png");
}
// --
.rich_fox6 {
    transform: translate(265px, 129.5px);
}
.rich_fox7 {
    transform: translate(299.5px, 150px);
}
.rich_fox8 {
    transform: translate(276px, 170.5px);
    @include bg("rich_fox_left.png");
}
.rich_fox9 {
    transform: translate(240.5px, 190px);
    @include bg("rich_fox_left.png");
}
.rich_fox10 {
    transform: translate(264px, 211px);
}
.rich_fox11 {
    transform: translate(241px, 232px);
    @include bg("rich_fox_left.png");
}
.rich_fox12 {
    transform: translate(207.5px, 253.5px);
    @include bg("rich_fox_left.png");
}
.rich_fox13 {
    transform: translate(173.5px, 275.5px);
    @include bg("rich_fox_left.png");
}
.rich_fox14 {
    transform: translate(137.5px, 255.5px);
    @include bg("rich_fox_left.png");
}
.rich_fox15 {
    transform: translate(102.5px, 235px);
    @include bg("rich_fox_left.png");
}
.rich_fox16 {
    transform: translate(69px, 214px);
    @include bg("rich_fox_left.png");
}
.rich_fox17 {
    transform: translate(92.5px, 193.5px);
}
.rich_fox18 {
    transform: translate(127px, 173px);
}
.rich_fox19 {
    transform: translate(102px, 152px);
    @include bg("rich_fox_left.png");
}
.rich_fox20 {
    transform: translate(127px, 131.5px);
}
.rich_fox21 {
    transform: translate(103px, 110px);
    @include bg("rich_fox_left.png");
}
.rich_fox22 {
    transform: translate(68.5px, 89px);
    @include bg("rich_fox_left.png");
}
.rich_fox23 {
    transform: translate(93.5px, 68.5px);
}
.rich_fox24 {
    transform: translate(127px, 48px);
}
.rich_prize1 {
    position: absolute;
    top: 65px;
    right: 95.5px;
    width: 42.5px;
    height: 26.5px;
    transition: 0.5s;
    @include bg("rich_prize1.png");
}
.rich_prize2 {
    position: absolute;
    top: 101px;
    right: 87.5px;
    width: 50.5px;
    height: 32.5px;
    @include bg("rich_prize2.png");
}
.rich_prize3 {
    position: absolute;
    top: 162.5px;
    right: 58px;
    width: 41.5px;
    height: 35px;
    @include bg("rich_prize3.png");
}
.rich_prize4 {
    position: absolute;
    top: 188.5px;
    left: 218px;
    width: 35px;
    height: 33px;
    @include bg("rich_prize4.png");
}
.rich_prize5 {
    position: absolute;
    top: 266px;
    right: 158.5px;
    width: 43px;
    height: 36px;
    @include bg("rich_prize5.png");
}
.rich_prize6 {
    @extend .rich_prize1;
    top: 235px;
    right: 235px;
}
.rich_prize7 {
    @extend .rich_prize2;
    top: 185.5px;
    right: 227.5px;
}
.rich_prize8 {
    position: absolute;
    top: 164px;
    right: 196px;
    width: 42.5px;
    height: 35px;
    @include bg("rich_prize8.png");
}
.rich_prize9 {
    @extend .rich_prize3;
    top: 80.5px;
    right: 266px;
}
.rich_prize10 {
    position: absolute;
    top: 58.5px;
    left: 82.5px;
    width: 32.5px;
    height: 41.5px;
    @include bg("rich_prize10.png");
}
.rich_prize11 {
    @extend .rich_prize5;
    top: 39.5px;
    right: 194.5px;
}
// 奖励弹窗
.reward {
    padding: 30px 0 30px;
    width: 440px;
    position: relative;
    background: #fef9ed;
    border: 3px solid #9c3603;
    border-radius: 30px;
}
.reward_title {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 176px;
    height: 40px;
    @include bg("reward_title.png");
}
.reward_congrats {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #9a1414;
    text-align: center;
}
.reward_sure_btn {
    margin: 20px auto 0;
    width: 120px;
    height: 40px;
    line-height: 40px;
    @include bg("reward_sure_btn.png");
    font-size: 18px;
    color: #9c3603;
    text-align: center;
    cursor: pointer;
}
.gift_list {
    margin-top: 15px;
    text-align: center;
    font-size: 0;
}
.gift {
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
    width: 100px;
    height: 140px;
    // outline: 1px solid red;
}
.gift_bg {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    @include bg("gift_bg.png");
}
.gift_img {
    width: 80px;
    height: 80px;
}
.gift_name {
    margin-top: 8px;
    font-size: 16px;
    color: #9a1414;
    text-align: center;
    line-height: 16px;
}
// 掷骰子
.dice {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 10;
}